import React, { useState } from 'react';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
import { Button } from 'antd';
import FooterBar from '@/components/FooterBar';
import EditModal from './Edit';
import ListItem from './ListItem';
import mockData from './mockData';

const Swiper = () => {
    const [items, setItems] = useState(mockData);
    const [open, setOpen] = useState(false);
    // 用于编辑弹窗接收详情数据
    const [editData, setEditData] = useState({});

    // 这个就是拖拽后的回调事件
    const onDragEnd = (result) => {
        const newItems = Array.from(items);
        const [removed] = newItems.splice(result.source.index, 1);
        newItems.splice(result.destination.index, 0, removed);
        setItems(newItems);
    };

    // 轮播图数据调整完毕后点击确认按钮，调接口保存
    const handleSubmit = () => {
        // eslint-disable-next-line no-console
        console.log(items, 'items');
    };

    // 打开编辑弹窗
    const handleEdit = (item) => {
        // 将编辑数据传递给弹窗组件
        setEditData(item);
        setOpen(true);
    };

    // 编辑结束
    const handleEditEnd = (data) => {
        if (data.id) {
            const newItems = items.map((item) => {
                if (item.id === data.id) {
                    return data;
                }
                return item;
            });
            setItems(newItems);
        } else {
            const newItems = [...items, { ...data, id: `${new Date().getTime()}asd` }];
            setItems(newItems);
        }
    };

    const handleDelete = (id) => {
        const newItems = items.filter((item) => item.id !== id);
        setItems(newItems);
    };

    return (
        <div>
            <Button type="primary" onClick={() => handleEdit({})}>新增</Button>

            <DragDropContext onDragEnd={onDragEnd}>
                <Droppable droppableId="droppable" direction="horizontal">
                    {(provided) => (
                        <div {...provided.droppableProps} ref={provided.innerRef} style={{ display: 'flex' }}>
                            {items.map((item, index) => (
                                <Draggable key={item.id} draggableId={item.id} index={index}>
                                    {(ff) => (
                                        <ListItem
                                            provided={ff}
                                            item={item}
                                            handleDelete={handleDelete}
                                            handleEdit={handleEdit}
                                        />
                                    )}
                                </Draggable>
                            ))}
                            {provided.placeholder}
                        </div>
                    )}
                </Droppable>
            </DragDropContext>

            <FooterBar>
                <Button type="primary" onClick={handleSubmit}>确定</Button>
            </FooterBar>

            <EditModal
                editData={editData}
                open={open}
                setOpen={setOpen}
                onSubmit={handleEditEnd}
            />
        </div>

    );
};
export default Swiper;
